<template>
	<div class="Pos">
		<el-row>
			<el-col :span='7' class="pos-order" id="order">
				<el-tabs>
					<el-tab-pane label="点餐">
						<el-table :data="tableData" border style="width: 100%">
							<el-table-column prop="name" label="商品名称">
							</el-table-column>
							<el-table-column prop="price" label="金额" width="50">
							</el-table-column>
							<el-table-column prop="num" label="数量" width="70">
							</el-table-column>
							<el-table-column label="操作" width="100" fixed="right">
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="挂单"></el-tab-pane>
					<el-tab-pane label="外卖"></el-tab-pane>
				</el-tabs>
			</el-col>
			<el-col>我是产品栏</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'Pos',
		data() {
			return{
				tableData: []
			}
		},
		mounted: function() {
			var orderHeight = document.body.clientHeight; //获取浏览器可视高度；
			document.getElementById('order').style.height = orderHeight + 'px'
		}
	}
</script>

<style>
	.pos-order {
		background-color: #fcfcfc;
		border-right: 1px solid #c0ccda;
	}
</style>